<template>
    <div class="btn-group">
        <button type="button" class="btn btn-white" v-bind="{ disabled: paginator.current_page == 1 }" @click="selectPage(paginator.current_page - 1)"><i class="fa fa-chevron-left"></i></button>
        <button v-if="paginator.has_previous" class="btn btn-white" v-bind:class="{ active: 1 === paginator.current_page }" @click="selectPage(1)">1</button>
        <span class="btn btn-white" v-if="paginator.current_page > 7">...</span>
        <button v-for="(page,index) in paginator.previous_pages" class="btn btn-white" :key="'info1'+index" @click="selectPage(page)">{{ page }}</button>
        <button v-if="paginator.current_page" class="btn btn-white" v-bind:class="{ active: paginator.current_page }">{{ paginator.current_page }}</button>
        <button v-for="(page,index) in paginator.next_pages" class="btn btn-white" :key="'info2'+index" @click="selectPage(page)">{{ page }}</button>
        <span class="btn btn-white" v-if="paginator.total_page - paginator.current_page > 6">...</span>
        <button v-if="paginator.has_next" class="btn btn-white" @click="selectPage(paginator.total_page)">{{ paginator.total_page }}</button>
        <button type="button" class="btn btn-white" v-bind="{ disabled: paginator.total_page == paginator.current_page | paginator.total_page == 0}" @click="selectPage(paginator.current_page + 1)"><i class="fa fa-chevron-right"></i> </button>
    </div>
</template>
<script>
export default {
    name: 'Paginator',
    props: {
        paginator: [Object]
    },
    data () {
        return {

        }
    },
    methods: {
        selectPage(num) {
            this.paginator.current_page = num;
            // this.getTestPlan(this.user.token, this.project_id, this.paginator.current_page);
            this.$emit('current_page', this.paginator.current_page);
        },
    }
}
</script>
